import React, { useState } from 'react'
import { Table, Button, Form, Modal, DatePicker, Input, Row, Col, message } from 'antd'
import { ColumnProps } from 'antd/lib/table'
import moment from 'moment'
import { formatTime } from '~/utils/utils'
import {} from '~/api/property-management-api'
import { handleUpdateStoreLocation, handleUpdateStoreLocationPics } from '~/api/property-management-api'
import UploadCom from '~/components/my-upload'
import ItemModal from '~/components/item-modal'
import { UploadOutlined } from '@ant-design/icons'

const docs = new Map()
let cacheRecord: any = {}

const colums = ({ setModalVisible }: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '数量(单位)',
    dataIndex: 'itemStock',
    align: 'center',
    render: (itemName: any, record: any) => (
      <div>
        {record.itemStock.totalNumber} ({record.itemStock.unitName})
      </div>
    )
  },
  {
    title: '规格',
    align: 'center',
    dataIndex: 'specs'
  },
  {
    title: '特征',
    align: 'center',
    dataIndex: 'feature'
  },
  {
    title: '存放地',
    align: 'center',
    dataIndex: 'storeLocation'
  },
  {
    title: '存放人',
    align: 'center',
    dataIndex: 'storeUserName'
  },
  {
    title: '存放时间',
    align: 'center',
    dataIndex: 'storeTime',
    render: (time: any) => <div>{formatTime(time)}</div>
  },
  {
    title: '库架编号',
    align: 'center',
    dataIndex: 'storeLocationNo'
  }
]
const rowSelection = ({ setSelectArr }: any) => {
  return {
    onChange: (selectedRowKeys: any) => {
      setSelectArr(selectedRowKeys)
    }
  }
}

const WaitingList = ({ castItems, handleGetCastItems }: any) => {
  const [visible, setVisible] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)
  const [selectArr, setSelectArr] = useState([])
  const [form] = Form.useForm()

  const onFinish = async (val: any) => {
    await handleUpdateStoreLocation({ serialNos: selectArr, ...val, storeTime: moment(val.storeTime).format() })
    handleGetCastItems()
    setVisible(false)
  }
  const formLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }
  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <Button
          style={{ marginRight: 10 }}
          type="primary"
          onClick={() => {
            if (!selectArr.length) return message.error('请至少选择一个物品')
            setVisible(true)
          }}
        >
          批量设置存放地信息
        </Button>
        {selectArr.length ? (
          <UploadCom
            frontend="frontendepic"
            onSuccess={async ({ storeId, name, files }: any) => {
              console.log('files', files)
              docs.set(files.name, { storeId, name })
              for (const serialNo of selectArr) {
                await handleUpdateStoreLocationPics({ serialNo, storePics: [...docs.values()] })
              }
              message.success('设置存放地照片成功')
            }}
            onRemove={(file: any) => {
              docs.delete(file.name)
              console.log('onRemove', file)
            }}
            title="上传存放地凭证"
          />
        ) : (
          <Button
            onClick={() => {
              if (!selectArr.length) {
                return message.error('请至少选择一个物品上传')
              }
            }}
            icon={<UploadOutlined />}
          >
            上传存放地凭证
          </Button>
        )}
      </div>

      <Table
        rowSelection={rowSelection({ setSelectArr })}
        rowKey="serialNo"
        pagination={{
          size: 'default',
          total: castItems.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        dataSource={castItems}
        columns={colums({})}
        bordered
      />
      <Modal
        width={800}
        title="批量设置存放地信息"
        visible={visible}
        onCancel={() => {
          setVisible(false)
        }}
        footer={null}
      >
        <Form validateTrigger="onBlur" {...formLayout} form={form} onFinish={onFinish} labelAlign="right">
          <Row>
            <Col span={12}>
              <Form.Item name="storeLocation" rules={[{ required: true, message: '请输入存放地点' }]} label="存放地点">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="storeTime" rules={[{ required: true, message: '请选择存放时间' }]} label="存放时间">
                <DatePicker style={{ width: '100%' }} showTime={{ format: 'HH:mm' }} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="storeUserName" rules={[{ required: true, message: '请输入存放人' }]} label="存放人">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="storeLocationNo" label="库架编号">
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Col span={24}>
            <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'center', marginTop: 24 }}>
              <Button
                onClick={() => {
                  setVisible(false)
                }}
              >
                取消
              </Button>
              <Button htmlType="submit" style={{ marginLeft: 8 }} type="primary">
                确定提交
              </Button>
            </Form.Item>
          </Col>
        </Form>
      </Modal>
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default WaitingList
